<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="../assets/images/logo.png">
    <title>Document</title>
    
    <!-- 引入css：elementUi、bootstrap、bootstrap-icons、normalize统一规范、index -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../assets/css/normalize.css">
    <link rel="stylesheet" href="../assets/css/detail.css">

    <!-- 引入JS：vue、elementUI、jQuery、bootstrap -->
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script src="../node_modules/element-ui/lib/index.js"></script>
    <script src="../node_modules/jQuery/tmp/jquery.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <!-- 引入http-vue-loader：html页面中引入VUE组件需要的包 -->
    <script src="../node_modules/http-vue-loader/src/httpVueLoader.js"></script>
    <script src="../node_modules/axios/dist/axios.min.js"></script>
    <script src="../assets/js/common.js"></script>


    
</head>

<body>
  <div id="app">
    <!-- 引入头部组件 -->
    <my-header></my-header>

    <section style="margin-top: 80px">
        <div class="container">
            <a href="#">
                <img src="../../assets/images/see.jpg" width="100%" alt=""/>
            </a>
        </div>
    </section>
  
    <section class="mt-3">
      <div class="container">
          <div class="card" style="background-color: white;">
              <div class="card-body">
                <div class="text-center">
                  <h2 class="my-4">{{article.articleName}}</h2>
                  <p>
                    <i class="bi bi-folder2-open opacity-50"></i>
                    <span class="card-text articleMsg">{{article.typeName}}</span>
                    <i class="bi bi-tags opacity-50 ms-2"></i>
                    <span class="card-text articleMsg">{{article.articleTag}}</span>
                    <i class="bi bi-alarm opacity-50  ms-2"></i>
                    <span class="card-text articleMsg">{{article.createTime}}</span>
                    <!-- <a href="#" class="card-link articleMsg ms-2"  > -->
                      <button type="button"  @click="handleStar()" class="articleMsg btn btn-light" :disabled="able" ><i :class="starIcon" ></i></button>
                       {{article.articleStarNum}}
                    <!-- </a> -->
                    <i class="bi bi-book-half opacity-50 ms-2"></i>
                    <span class="card-text articleMsg">{{article.articleReadCount}}</span>
                  </p>
                  <hr class="my-4"/>
                  <p class="text-start" v-html="article.articleContent">
                   
                  </p>
                </div>
                <hr class="my-4"/>
                <div>
                  <h3>相关文章</h3>
                  <ul class="list-group list-group-flush mb-3">
                    <li class="list-group-item" style="border: none;" v-for="r in related">&bull; 
                      <a :href="'blog-detail.html?'+r.id" class="text-info article">{{r.articleName}}</a>
                    </li>
                    
                  </ul>


                  <div style="background-color: #fafbfc;">
                    <div class="d-flex">
                      <img src="../../assets/images/p28.jpg" alt="" width="40px" class="rounded-circle m-2"/>
                      <input v-model="userComment" class="form-control h-75 mt-3" placeholder="请输入评论..."/>
                    </div>
                    <button type="button" @click="addComment()" class="btn btn-primary" style="width: 100px;margin-left: 55px;">发表评论</button>
                  </div>

                  <hr/>

                    <div height="100">
                    <div v-for="c in comments">
                      <div class="delBtn">
                        <i class="bi bi-trash3-fill" @click="deleteComment(c.id)"></i>
                      </div>
                      <div class="d-flex">
                        <img src="../../assets/images/p28.jpg" alt="" width="40px" class="rounded-circle m-2"/>
                        <div class="mt-1">
                          <span class="text-dark fw-bolder h6">游客: 
                            <span> {{c.nickname}}</span>
                          </span>
                          <br/>
                          <span>{{c.createTime}}</span>
                        </div>
                      </div>
                      <span style="margin-left: 55px;">{{c.content}}</span>
                      <hr class="my-2"/>
                    </div>  
                  
                    <div class="block">
                      <span class="demonstration"></span>
                      <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totals">
                      </el-pagination>
                    </div>
                  </div>
                  <!-- my-3【上下外边距1rem】，ps-1【左内边距0.25rem】，pe-4【右内边距1.5rem】，
                    d-flex【开启弹性布局】，justify-content-between【主轴方向两端对齐】 -->
                  <div class="my-3 ps-1 pe-4 d-flex justify-content-between">
                    <p>转载声明：本博客由波波老师创作。可自由转载、引用，
                      但需署名作者且注明文章出处。如转载至微信公众号，请在文末添加作者微信二维码。
                    </p>
                    <img src="../../assets/images/CSDN.png" alt="" width="150px" height="130px"/>
                  </div>
                </div>
              </div>
            </div>
      </div>
    </section>
  </div>

  <script>
   
    new Vue({
      el:"#app",
      data() {
        return {
          totals: 0,//总记录条数
                currentPage: 1,//当前页,要传递到后台的
                pageSize: 5, //每页显示多少条
          article:{},
          articleId:null,
          related:[],
          comments:[],
          userComment:'',
          color:"",
          able:false,
          starIcon:""
          
          
        }
      },
      methods:{
          getArticle(){
            
            this.$http.get("/article/"+this.articleId).then(ref=>{
              this.article=ref.data
            })
          },
          getRelated(){
                    this.$http("/article/getRelated/"+this.articleId).then(res=>{
                      this.related=res.data
                    })
                },
          findCommentByArticleId(){
              // this.$http.get("/comment/"+this.articleId).then(res=>{
              //     this.comments=res.data
              //     console.log(this.comments);
              // }).catch(res=>{
              //   this.$message.error("连接失败");
              // })

              this.$http.post("/comment/",{
                "currentPage": this.currentPage,
                  "pageSize": this.pageSize,
                   "articleId": this.articleId, 
              }).then(res=>{
                this.comments=res.data.list
                this.totals = res.data.total
                  console.log(this.comments);
              }).catch(res=>{
                this.$message.error("连接失败");
              })
               
          }, 
          createUuid() {
          var s = [];
          var hexDigits = "0123456789abcdefghi";
          for (var i = 0; i < 36; i++) {
            s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
          }
          s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
          s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
          s[8] = s[13] = s[18] = s[23] = "-";

          var uuid = s.join("");
          return uuid;
        },
          addComment() {
          let params = {
            content: this.userComment,
            articleId: this.articleId,
            nickname: this.createUuid()
          }
          this.$http.put("/comment",params).then(res=>{
            if(res.data.success){
              this.findCommentByArticleId();
              this.userComment=''
            }else{
              this.$message.warning("获取失败")
            }
          }).catch(res=>{
            this.$message.error("请求失败")
          })
          },
          deleteComment(id){
           this.$http.delete("/comment/"+id).then(res=>{
            if(res.data.success){
              this.findCommentByArticleId();
            }else{
              this.$message.warning("删除失败")
            }
           }).catch(res=>{
              this.$message.error("请求失败")
           }
           )
          },
          addReadNum(id){
            this.$http.put("/article/"+id).then(res=>{
              this.getArticle()
            })
          },
          handleStar(){
                this.$http.put("/article/updateStar/" + this.articleId).then(res=>{
                    if (res.data.success){
                        if (res.data.data == "cancel"){
                            //设置点赞图标的颜色 - 未点赞
                            this.starIcon = "bi bi-hand-thumbs-up opacity-50";
                        }else {
                            //设置点赞图标的颜色 - 已点赞    
                            this.starIcon = "bi bi-hand-thumbs-up-fill opacity-50"
                        }
                        //调用查询文章详情方法
                        this.getArticle();
                    }else {
                        this.$message.error("系统繁忙，请稍后重试【500】");
                    }
                }).catch(res=>{
                    this.$message.error("系统繁忙，请稍后重试【400,404】");
                })
            },
            getInitIconClass(){
                let url = location.href;
                let articleId = url.substring(url.lastIndexOf("?") + 1)//获取文章id
                this.$http.get("article/initIconClass/" + articleId).then(res=>{
                    if (res.data.data == "ok"){ //已经点赞过的
                        this.starIcon = "bi bi-hand-thumbs-up-fill opacity-50";
                    }else{//这个电脑还没有点赞
                        this.starIcon = "bi bi-hand-thumbs-up opacity-50";
                    }
                }).catch(res=>{
                    this.$message.error("系统繁忙，请稍后重试【400，404】")
                })
            },
            handleCurrentChange(currentPage) {
                    this.currentPage = currentPage
                    this.findCommentByArticleId(this.articleId)
                },
                //1.3.选择每页显示记录条数时触发
                handleSizeChange(pageSize) {
                    this.pageSize = pageSize
                    this.getArticles()
                },
         
      },
      components: {
          // 将组建加入组建库
          'my-header': httpVueLoader('./common/header.vue')
      },
      mounted(){
         this.articleId = location.href.substring(location.href.lastIndexOf("?")+1)
         this.getInitIconClass()
        this.addReadNum(this.articleId)
        this.getArticle();
        this.getRelated();
        console.log(111);
        console.log(this.related);
        this.findCommentByArticleId();
        console.log(this.comments);
       
      }
    })

   

  </script>

</body>

</html>